*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul li {
    list-style: none;
}
img {
    width: 100%;
}

@media screen and (min-width: 1280px) {
    header {
        /* width: 100vw; */
        height: 720px;
        background-image: linear-gradient(to top ,#381be5, #08d5c6);
        position: relative;
    }
    header div:nth-child(1) {
        position: absolute;
        width: 100%;
        height: 720px;
        overflow: hidden;
    }
   /*  header div:nth-child(1) img{
        max-width: 100vw;
        max-height: 100vh;
    } */
    header .zhuti {
        position: absolute;
        top: 0;
        left: 50%;
        margin: 0 auto;
        width: 944px;
        height: 720px;
        transform: translate(-50%,0);
    }
    .zhuti ul {
        position: relative;
    }
    .zhuti ul li {
        position: absolute;
    }
    .zhuti ul li:nth-child(2) {
     top: 186px;
     left: 50%;
     margin: 0 auto;
     width: 580px;
     transform: translate(-50%,0);
    }
    .zhuti ul li:nth-child(3) {
        top: 300px;
        left: 50%;
        margin: 0 auto;
        width: 515px;
        transform: translate(-50%,0);
       }
       /* 左手 */
       .zhuti ul li:nth-child(4) {
        top: 400px;
        left: 50%;
        margin: 0 auto;
        width: 186px;
        transform: translate(-95%,0);
        animation: scale1 8s ease-in infinite;
    }
    @keyframes scale1 {
     0% {
         transform: scale(1);
         transform: translate(-95%,0);
     }
        33% {
            transform: scale(2);
            transform: translate(-100%,3%);
        }
        66% {
         transform: scale(2);
         transform: translate(-100%,3%);
     }
     100% {
         transform: scale(1);
         transform: translate(-95%,0);
     }
       }

       /* 右手 */
       .zhuti ul li:nth-child(5) {
        top: 400px;
        left: 50%;
        margin: 0 auto;
        width: 186px;
        transform: translate(30%,0);
        animation: scale2 8s ease-in infinite;
       }
       @keyframes scale2 {
        0% {
            transform: scale(1);
            transform: translate(30%,0);
        }
           33% {
               transform: scale(2);
               transform: translate(35%,3%);
           }
           66% {
            transform: scale(2);
            transform: translate(35%,3%);
        }
        100% {
            transform: scale(1);
            transform: translate(30%,0);
        }
       }

       /* 星星装饰 */
       .zhuti ul li:nth-child(6) {
        top: 350px;
        left: 50%;
        margin: 0 auto;
        width: 350px;
        /* transform: translate(-30%,0); */
        animation: scale3 16s ease-in infinite;
       }
       @keyframes scale3 {
        0% {
            transform: scale(1);
            transform: translate(-40%,-15%);
        }
           33% {
               transform: scale(2);
               transform: translate(-40%,-10%);
           }
           66% {
            transform: scale(2);
            transform: translate(-40%,-65%);
        }
        100% {
            transform: scale(1);
            transform: translate(-40%,-15%);
        }
       }


       /* 技能点样式加动画 */
       .zhuti ul li:nth-child(7) {
        top: 450px;
        left: 50%;
        margin: 0 auto;
        width: 110px;
        /* transform: translate(-30%,0); */
        animation: scale4 6s ease-in infinite;
       }
       @keyframes scale4 {
        0% {
            transform: scale(1);
            transform: translate(-40%,-15%);
        }
           50% {
               transform: scale(2);
               transform: translate(-40%,-10%);
           }
        100% {
            transform: scale(1);
            transform: translate(-40%,-15%);
        }
       }

       .zhuti ul li:nth-child(8) {
        top: 430px;
        left: 40%;
        margin: 0 auto;
        width: 110px;
        /* transform: translate(-30%,0); */
        animation: scale5 6s ease-in infinite;
       }
       @keyframes scale5 {
        0% {
            transform: scale(1);
            transform: translate(-40%,-25%);
        }
           50% {
            transform: scale(2);
            transform: translate(-40%,-45%);
        }
        100% {
            transform: scale(1);
            transform: translate(-40%,-25%);
        }
       }


       .zhuti ul li:nth-child(9) {
        top: 380px;
        left: 50%;
        margin: 0 auto;
        width: 110px;
        /* transform: translate(-30%,0); */
        animation: scale6 6s ease-in infinite;
       }
       @keyframes scale6 {
        0% {
            transform: scale(1);
            transform: translate(-40%,-15%);
        }
           50% {
               transform: scale(2);
               transform: translate(-40%,-10%);
           }
        100% {
            transform: scale(1);
            transform: translate(-40%,-15%);
        }
       }

       .zhuti ul li:nth-child(10) {
        top: 430px;
        left: 60%;
        margin: 0 auto;
        width: 110px;
        /* transform: translate(-30%,0); */
        animation: scale7 6s ease-in infinite;
       }
       @keyframes scale7 {
        0% {
            transform: scale(1);
            transform: translate(-40%,-25%);
        }
           50% {
            transform: scale(2);
            transform: translate(-40%,-45%);
        }
        100% {
            transform: scale(1);
            transform: translate(-40%,-25%);
        }
       }
       .content {
           display: flex;
           align-items: content;
           justify-content: center;
           flex-direction: column;
       }
       section.intro {
           /* width: 100vw; */
           height: 720px;
           background-color: #381be5;
           padding: 68px 0;
       }
       section.intro .title1 {
           position: relative;
           width: 1280px;
           height: 80px;
           margin: 0 auto;
           /* overflow: hidden; */
       }
       .title1 h2 {
           position: absolute;
           font-size: 48px;
           color: #fff;
       }
       .title1 img {
           position: absolute;
           top: 54px;
           width: 280px;
           height: 35px;
       }
       .title1 ul {
           position: absolute;
           right: 0;
       }
       .title1 ul li {
           width: 32px;
           height: 10px;
           background-color: #fff;
       }
       .title1 ul li:nth-child(2) {
           margin: 25px 0;
       }
       .items {
           display: grid;
           grid-template-columns: repeat(2,1fr);
           grid-template-rows: 196px 196px;
           grid-column-gap: 200px;
           grid-row-gap: 80px;
           width: 1280px;
           margin: 65px auto;
           color: #fff;
       }
       .items .item {
           display: grid;
           grid-template-columns: 380px 1fr;
       }
       .item .pic {
           position: relative;
           margin: 0 50px;
           width: 290px;
           height: 194px;
           overflow: hidden;
       }
       .item p {
           font-size: 16px;
           margin: 60px 0 0 10px;
       }
       .item .pic p {
           position: absolute;
           font-size: 16px;
           margin: 15px 0 0 20px;
           z-index: 3;
       }
       .item .pic img {
           position: absolute;
           display: inline;
           width: 290px;
           z-index: 2;
       }
       section.me {
        /* width: 100vw; */
        /* height: 1875px; */
        background-color: #fff;
        padding: 68px 0;
    }
    .me .aboutme {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 1280px;
        height: 746px;
        margin: 0 auto;
        box-shadow: 20px 20px 100px rgb(207, 207, 207);
    }
    .leftme {
        position: relative;
    }
    .leftme .picme {
        width: 430px;
        height: 746px;
        padding: 50px 0 50px 50px;
        background-image: url(../images/作品02/ShadowOverlay.png);
        background-repeat:no-repeat;
        background-size:contain ;
        color: #fff;
    }
    .leftme .picme p {
        font-size: 18px;
    }
    .leftme .picme span {
        display: block;
        position: relative;
        margin: 10px 0 400px 0;
    }
    .leftme .picme span i {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 22px;
        height: 22px;
        background-image: url(../images/作品02/形状2.png);
        background-size: contain;
    }
    .leftme .picme span p {
        position: absolute;
        left: 24px;
        line-height: 22px;
    }
    .leftme .picme h4 {
        font-size: 18px;
        font-weight: 600;
    }
    .picme .email , .picme .phone {
        margin-bottom: 30px;
    }
    .leftme .photo {
        position: absolute;
        top: 30% ;
        left: 50% ;
        width: 210px;
        height: 320px;
        background-color: #999;
    }
    .leftme .chang {
        position: absolute;
        top: 60% ;
        left: 80% ;
        width: 80px;
        height: 4px;
        background-color: #2673ff;
    }
    .rightme {
        display: flex;
        position: relative;
        flex-direction: column;
        padding: 50px 50px 50px 0;
    }
    .rightme .chang1 {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: flex-end;
        margin-bottom: 68px;
    }
    .rightme .chang1 li {
        width: 20px;
        height: 4px;
        margin: 2px 0;
        background-color: #2673ff;
    }
    .item1 div {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .item1 div img {
        width: 36px;
        height: 36px;
        margin-right: 14px;
    }
    .item1 div h2 {
        line-height: 36px;
    }
    .item1 .dian {
        position: relative;
        display: block;
        height: 6px;
        margin: 30px 0 50px 0;
    }
    .item1 .dian span:nth-child(1) {
        display: block;
        height: 2px;
        background-color: #f1f1f1;
    }
    .item1 .dian span:nth-child(2) {
        position: absolute;
        right: 0;
        top: 50%;
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #2673ff;
        transform: translate(0,-50%);
    }
    .rightme p {
        font-size: 18px;
    }
    .rightme .item2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 30px 30px;
        margin-bottom: 30px;
    }
    .rightme .item3 {
        display: flex;
        flex-direction: column;
        margin-bottom: 88px;
    }
    .rightme .item3 p {
        height: 30px;
    }
    .rightme .chang2 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: #fff;
        text-align:center;
    }
    .rightme .chang2 li {
        width: 120px;
        height: 44px;
        line-height: 44px;
    }
    .rightme .chang2 li p {
        padding-left: 30px;
    }
    .rightme .chang2 li:nth-child(1) {
        background-color: #2673ff;
        background-image: url(../images/作品02/网页.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    .rightme .chang2 li:nth-child(2) {
        background-color: #3d47f7;
        background-image: url(../images/作品02/运营.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    .rightme .chang2 li:nth-child(3) {
        background-color: #3b3c3d;
        background-image: url(../images/作品02/代码.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    .rightme .chang2 li:nth-child(4) {
        background-color: #f2ad2b;
        background-image: url(../images/作品02/书籍.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item4 {
        position: absolute;
        right: 50px;
        bottom: 50px;
        width: 135px;
        height: 135px;
    }
    .item4 img {
        float: right;
    }
    .me .ability {
        width: 1280px;
        margin: 130px auto;
    }
    .ability1 {
        display: flex;
        flex-direction: row;
        margin: 14px 0;
    }
    .ability1 img {
        width: 36px;
        height: 36px;
        margin-right: 14px;
    }
    .ability2 ul {
        display: flex;
        flex-direction: row;
        padding: 34px 0;
    }
    .ability2 ul h3 {
        font-size: 24px;
        color: #2673ff;
        padding: 10px 0 ;
    }
    .ability3 {
        padding: 34px 0;
    }
    .ability3 h3 {
        font-size: 24px;
        color: #2673ff;
        padding: 10px 0 ;
    }
    .ability3 ul {
        display: flex;
        flex-direction: row;
    }
    .ability3 ul li {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-right: 80px;
    }
    .ability3 ul li img {
        display: block;
        margin: 10px 0;
        width: 66px;
        height: 66px;
    }
    .ability3 ul li p {
        font-size: 18px;
    }
    .works {
        position: relative;
        width: 1280px;
        margin: 130px auto;
    }
    .works1 {
        display: flex;
        flex-direction: row;
        margin: 14px 0;
    }
    .works1 img {
        width: 36px;
        height: 36px;
        margin-right: 14px;
    }
    .works2 {
        display: flex;
        flex-direction: row;
    }
    .works2 ul li:nth-child(1) {
        width: 8px;
        height: 180px;
        background-color: #1d41eb;
    }
    .works2 ul li:nth-child(2) {
        width: 8px;
        height: 100px;
        background-color: #3a76e4;
    }
    .works2 ul li:nth-child(3) {
        width: 8px;
        height: 40px;
        background-color: #5b5f6c;
    }
    .works2 .jingli {
        position: absolute;
        left: 8px;
        width: 1280px;
        padding: 40px 0 40px 112px;
        background-color: #181818;
        background-image: url(../images/作品02/形状5拷贝4.png);
        background-repeat: no-repeat;
        background-size: contain;
        /* background-position: bottom; */
        color: #fff;
    }
    .jingli .company {
        display: flex;
        flex-direction: row;
    }
    .company span {
        display: flex;
        flex-direction: row;
        margin: 10px 0 ;
    }
    .company span h3 {
        line-height: 18px;
    }
    .company h4 {
        padding: 30px 0 10px 0;
    }
    .company .xiucai h4 {
        color: #1653f0 ;
    }
    .company p {
        margin: 10px 0;
    }
    .jingli .company .xiucai span img {
        width: 18px;
        height: 18px;
        margin-right: 10px;
    }
    .jingli .company .huaimei span img {
        width: 18px;
        height: 18px;
        margin-right: 10px;
    }
    section.advertise {
        background-color: #fff;
        padding: 68px 0 ;
        background-image: url(../images/作品03/背景层.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position:center center;
    }
    .advertise .xiangqing {
        width: 1280px;
        height: 1140px;
        margin: 30px auto;
    }
    .xiangqing .ad1 {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .xiangqing .ad1 img:nth-child(1) {
        height: 45px;
        width: 45px;
        margin-right: 10px;
    }
    .xiangqing .ad1 p:nth-child(2) {
        height: 45px;
        line-height: 45px;
    }
    .xiangqing .ad1 div:nth-child(3) {
        height: 2px;
        width: 600px;
        padding-left: 50px;
        margin-left: 20px;
        background-color: #fff;
    }
    .xiangqing .ad1 p {
        color: #fff;
    }
    .xiangqing h3 {
        font-size: 48px;
        padding: 30px 0 30px 100px ;
        color: #fff;
        opacity: .3;
    }
    .xiangqing h4 {
        padding: 10px 0;
        font-size: 24px;
        color: #fff;
    }
    .xiangqing .ad2 {
        position: relative;
        width: 1172px;
        height: 670px;
        margin: 60px auto;
        padding: 40px 60px;
        background-color: #fff;
        box-shadow: 20px 20px 80px #c5c5c5;
    }
    .ad2 .ad2a {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .ad2 .ad2a img {
        width: 74px;
    }
    .ad2 .ad2a div:nth-child(3) {
        width: 3px;
        height: 40px;
        margin: 0 30px;
        background-color: #666;
    }
    .ad2 h4 {
        padding: 10px 0;
        font-size: 24px;
        color: #333;
    }
    .ad2 h6 {
        font-size: 14px;
        color: #999;
    }
    .ad2 p {
        font-size: 18px;
        color: #333;
    }
    .ad2 .ad2b {
        position: absolute;
        top: 228px;
        left: -50px;
        width: 584px;
        height: 328px;
        padding: 46px;
        background-image: url(../images/作品03/椭圆3.png);
        background-size: contain;
    }
    .ad2 .ad2b p {
        font-size: 18px;
        color: #fff;
    }
    .ad2 .ad2b h4:nth-child(1) {
        font-size: 36px;
        color: #fff;
    }
    .ad2 .ad2b h3:nth-child(2) {
        font-size: 36px;
        color: #fff;
        padding-left: 0;
        opacity: 1;
    }
    .ad2 .ad2b div:nth-child(4) {
        width: 2px;
        height: 40px;
        margin: 0 10px;
        background-color: #fff;
    }
    .ad2 .ad2c {
        position: absolute;
        right: 0px;
        top: -50px;
        width: 512px;
        height: 912px;
        background-image: url(../images/作品03/手机样机.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    .pro {
        display: flex;
        width: 1280px;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        margin: 100px auto;
    }
    .pro .pro1 {
        margin: 80px 0;
    }
    .pro .pro1 ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .pro .pro1 ul li:nth-child(1) {
        width: 60px;
        height: 66px;
        line-height: 66px;
        font-size: 36px;
        font-weight: 600;
        text-align: center;
        color: #fff;
        background-image: url(../images/作品03/图层6.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    .pro .pro1 ul li:nth-child(3) {
        font-size: 18px;
        margin: 10px 0 30px 0;
    }
    .pro .pro1 ul li:nth-child(4) {
        display: flex;
        flex-direction: row;
        position: relative;
    }
    .pro .pro1 ul li:nth-child(4) span {
        height: 180px;
        overflow: hidden;
    }
    .pro .pro1 ul li:nth-child(4) div {
        display: flex;
        flex-direction: row;
        position: absolute;
        margin: 0 auto;
        left: 100px;
        width: 1100px;
        height: 180px;
        padding: 40px;
        background-color: #fff;
        box-shadow: 1px 10px 40px #e0e0e0;
        border-radius: 80px 0 80px 0;
    }
    .pro .pro1 ul li:nth-child(4) div img {
        width: 20px;
        height: 20px;
        margin-right: 20px;
    }

    /* pro2 */
    .pro .pro2 ul {
        display: flex;
        flex-direction: column;
        position: relative;
        align-items: flex-start;
    }
    .pro .pro2 ul li.pro2up {
        width: 60px;
        height: 66px;
        line-height: 66px;
        font-size: 36px;
        font-weight: 600;
        text-align: center;
        color: #fff;
        background-image: url(../images/作品03/图层6.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    .pro .pro2 ul li:nth-child(3) {
        font-size: 18px;
        margin: 10px 0 30px 0;
    }
    .pro .pro2 ul li:nth-child(4) {
        position: relative;
        height: 550px;
    }
    .pro .pro2 ul li:nth-child(4) .pro2a {
        display: flex;
        flex-direction: row;
        position: absolute;
        margin: 0 auto;
        width: 800px;
        height: 380px;
        padding: 80px;
        background-color: #fff;
        box-shadow: 1px 10px 40px #e0e0e0;
        border-radius: 80px 0 80px 0;
    }
    .pro .pro2 ul li:nth-child(4) .pro2a .touxiang {
        width: 280px;
        height: 300px;
        margin-right: 40px;
    }
    .pro2a div:nth-child(2) h3{
        margin-block-end: 20px;

    }
    .pro .pro2 ul li:nth-child(4) .pro2b {
        position: absolute;
        top: 200px;
        left: 680px;
        width: 600px;
        height: 400px;
        padding: 30px 80px;
        background-color: #fff;
        box-shadow: 1px 10px 40px #e0e0e0;
        border-radius: 80px 0 80px 0;
    }
    .pro2b h3 {
        margin: 20px 0;
    }
    .pro2b p {
        font-size: 18px;

    }
    .pro .pro2 ul li:nth-child(4) .pro2b ul li {
        display: flex;
        flex-direction: row;
        /* 此处有一个ul li 命名冲突的问题 ,注意避免,下次得要系统模块明名*/
        margin: 10px 0 30px 0;
    }
    .pro .pro2 ul li:nth-child(4) .pro2b ul img {
        width: 20px;
        height: 20px;
        margin-right: 20px;
    }
    .pro .pro2 ul li:nth-child(4) span {
        position: absolute;
        display: block;
        left: 800px;
        width: 480px;
        height: 880px;
        overflow: hidden;
        z-index: -1;
    }
   
    /* pro3 */
    .pro .pro3 {
        position:relative;
    }
    .pro .pro3 ul {
        display: flex;
        flex-direction: column;
        position: relative;
        align-items: flex-start;
    }
    .pro .pro3 ul li {
        margin: 5px 0;
    }
    .pro .pro3 ul li.pro2up {
        width: 60px;
        height: 66px;
        line-height: 66px;
        font-size: 36px;
        font-weight: 600;
        text-align: center;
        color: #fff;
        background-image: url(../images/作品03/图层6.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    .pro .pro3 ul li:nth-child(4) {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        padding: 80px 0;
        width: 1280px;
        height: 400px;
        /* background-color: #ccc; */
        text-align: center;
    }
    .pro .pro3 ul li:nth-child(4) .el1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 216px;
        height: 250px;
        color: #fff;
        background-image: url(../images/作品03/形状8.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    .pro .pro3 ul li:nth-child(4) .el1 h3 {
        font-size: 48px;
        margin: 20px 0;
    }
    .pro .pro3 ul li:nth-child(4) .el p {
        font-size: 18px;
        margin: 30px 0;
    }

    /* code */

    section.code {
        margin: 100px auto;
        width: 1280px;
    }
    .code1 ul li {
        margin: 5px 0;
    }
    .code1 ul li.pro2up {
        width: 60px;
        height: 66px;
        line-height: 66px;
        font-size: 36px;
        font-weight: 600;
        text-align: center;
        color: #fff;
        background-image: url(../images/作品03/图层6.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    .code1 ul li:nth-child(4) {
        margin: 200px 0 100px 0;
        text-align: right;
        font-size: 24px;
    }
    .code2 {
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid #dddddd;
        padding: 40px 0;
       /*  background-image: url(../images/作品04/形状1.png);
        background-size: contain;
        background-repeat: no-repeat;
 */
    }
    .code2 p {
        margin: 30px 0;
    }
    .code3 {
        padding: 100px 0 60px 0;
        border-bottom: 1px solid #dddddd;
    }
    .code3 p {
        margin: 30px 0;
    }
    .code3 ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* code4 */
    .code4 p {
        margin: 30px 0;
    }
    .code4 {
        padding: 100px 0 60px 0;
        border-bottom: 1px solid #dddddd;
    }
    .code4 ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .code4 p {
        margin: 30px 0;
    }
    .code4 ul li:nth-child(2) p:nth-child(1) {
        font-weight: 200;
    }
    .code4 ul li:nth-child(2) p:nth-child(2) {
        font-weight: 500;
    }
    .code4 ul li:nth-child(2) p:nth-child(3) {
        font-weight: 800;
    }


   /*  process */
    section.process {
        margin: 100px auto;
        width: 1280px;
    }
    .cess1 ul li {
        margin: 5px 0;
    }
    .cess1 ul li.pro2up {
        width: 60px;
        height: 66px;
        line-height: 66px;
        font-size: 36px;
        font-weight: 600;
        text-align: center;
        color: #fff;
        background-image: url(../images/作品03/图层6.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    /* cess2&cess3 */
    .cess2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 40px auto;
        padding: 80px 0;
        background-color: #f5f6f8;
    }
    .cess2 div {
        width: 80%;
    }
    .cess2 p {
        margin: 10px 0 30px 0;
    }

    .cess3 {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 40px auto;
        padding: 80px 0;
        background-color: #f5f6f8;
    }
    .cess3 div {
        width: 80%;
    }
    .cess3 p {
        margin: 10px 0 30px 0;
    }


    /* yunying */
    .yunying .yunying1 {
        width: 1280px;
        margin: 30px auto 80px auto;
    }
    .yunying1 .yy1 {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 30px auto 80px auto;
    }
    .yunying1 .yy1 img:nth-child(1) {
        height: 45px;
        width: 45px;
        margin-right: 10px;
    }
    .yunying1 .yy1 p:nth-child(2) {
        height: 45px;
        line-height: 45px;
    }
    .yunying1 .yy1 div:nth-child(3) {
        height: 2px;
        width: 600px;
        padding-left: 50px;
        margin-left: 20px;
        background-color: #1d41eb ;
    }

/* yunying2 */
.yunying .yunying2 {
    width: 1280px;
    margin: 30px auto 80px auto;
}
.yunying2 .smtitle {
    margin: 20px 0;
}
.yunying2 .smtitle p {
    font-size: 24px;
    text-align: end;
    color: #1d41eb;
}
.yunying2 .lunbo1 {
    display: flex;
    flex-direction: row;
}
.lunbo1 .silu {
    position: relative;
    width: 400px;
    height: 500px;
    padding: 50px 30px 50px 30px;
    background-color: #1d41eb;
    color: #fff;
}
.lunbo1 .silu .shuxian {
    position: absolute;
    left: 20px;
    width: 1px;
    height: 100%;
    background-color: #fff;
}
.lunbo1 .silu h3 {
    margin: 80px 0 10px 0;
}
.lunbo1 .silu p {
    margin-bottom: 40px;
    opacity: .7;
}
 .lunbo1 .poster1 {
     position: relative;
        width: 880px;
        height: 480px;
        overflow: hidden;
      }
 .lunbo1 .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #999;
        /* Center slide text vertically */
        display: flex;
        align-items: center;
        transition: 300ms;
        transform: scale(0.8);
  }
.lunbo1 .swiper-slide-active,.lunbo1 .swiper-slide-duplicate-active{
        transform: scale(1);
 }
 /* yunying3 */
 .yunying .yunying3 {
    width: 1280px;
    margin: 30px auto 80px auto;
    padding: 20px 30px;
    background-color: #eef2f8;
    overflow: hidden;
}
.yunying3 .smtitle p {
    font-size: 24px;
    color: #1d41eb;
}
.yunying3 .poster2 {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
  }
.yunying3 .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #999;
    /* Center slide text vertically */
    display: flex;
    align-items: center;
    transition: 300ms;
    transform: scale(0.8);
}
.yunying3 .swiper-slide-active,.yunying3 .swiper-slide-duplicate-active{
    transform: scale(1);
}

 /* yunying4 */
 .yunying .yunying4 {
    width: 1280px;
    margin: 30px auto 80px auto;
    padding: 20px 30px;
    background-color: #eef2f8;
    overflow: hidden;
}
.yunying4 .smtitle p {
    font-size: 24px;
    color: #1d41eb;
}
.yunying4 .poster3 {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
  }
.yunying4 .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #999;
    /* Center slide text vertically */
    display: flex;
    align-items: center;
    transition: 300ms;
    transform: scale(0.8);
}
.yunying4 .swiper-slide-active,.yunying4 .swiper-slide-duplicate-active{
    transform: scale(1);
}


/* album1 */
.album {
    width: 1280px;
    margin: 30px auto 80px auto;
}

.album .album1 ul {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: flex-start;
}
.album .album1 ul li.pro2up {
    width: 60px;
    height: 66px;
    line-height: 66px;
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background-image: url(../images/作品03/图层6.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.album .album1 ul li:nth-child(3) {
    font-size: 18px;
    margin: 10px 0 300px 0;
}

.album2 .uptitle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 100px;
}
.album2 p {
    text-align: center;
}
.uptitle .right {
    text-align: end;
}
.alpic1 {
    display: grid;
    grid-template-columns: 2fr 3fr 2fr 4fr;
    grid-template-rows: 244px;
    grid-column-gap: 20px;
    margin-bottom: 40px;
}
.alpic1 div {
    overflow: hidden;
}

.alpic2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 444px;
    grid-column-gap: 20px;
    padding: 50px 0;
    border-bottom: 1px solid #999;
}
.midtitle {
    margin: 80px 0 40px 0;
}
.midtitle p {
    text-align: start;
    margin: 20px 0;
}
.alpic3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 15px;
    padding: 20px 0 50px 0;
    border-bottom: 1px solid #999;
}

/* alpic4 */

.alpic4 {
    overflow: hidden;
}
.alpic4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 6fr 6fr;
    grid-column-gap: 20px;
    grid-row-gap: 15px;
    padding: 20px 0 50px 0;
    border-bottom: 1px solid #999;
}


}


